<template>
  <el-dialog title="新增商品" v-model="copyAddVisible" @close="visibleChange">
    <el-form :model="addGoodsForm" :inline="true">
      <el-form-item label="商品名称" label-width="80px">
        <el-input v-model="addGoodsForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="英文名" label-width="80px">
        <el-input v-model="addGoodsForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="卡种" label-width="80px">
        <el-select v-model="addGoodsForm.money" placeholder="请选择卡种">
          <el-option label="沃尔玛" value="shanghai" />
          <el-option label="大润发" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="面值" label-width="80px">
        <el-input v-model="addGoodsForm.money" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" label-width="80px">
        <el-switch
          v-model="addGoodsForm.status"
          active-text="上架"
          inactive-text="下架"
        />
      </el-form-item>
      <el-form-item label="图片" label-width="80px">
        <el-upload
          class="avatar-uploader"
          list-type="picture-card"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <!-- <Plus /> -->
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户说明" label-width="80px">
        <el-input v-model="addGoodsForm.money" autocomplete="off" />
      </el-form-item>

      <el-form-item label="备注" label-width="80px">
        <el-input v-model="addGoodsForm.money" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品说明" label-width="80px">
        <el-input
          v-model="addGoodsForm.money"
          autocomplete="off"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="addGoods"> 提交 </el-button>
        <el-button @click="visibleChange">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, onMounted } from "vue";
// import { Plus } from "@element-plus/icons-vue";

const props = defineProps({
  addVisible: {
    type: Boolean,
    default: false
  },
  chooseId: {
    type: String,
    default: "-1"
  }
});
// eslint-disable-next-line vue/no-setup-props-destructure
const copyAddVisible = props.addVisible.value;

const addGoodsForm = reactive({
  name: "",
  enname: "",
  money: "",
  status: "",
  image: "",
  deta: "",
  notes: ""
});

// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits();

// 关闭弹框
const visibleChange = () => {
  emit("visibleChange");
};

const addGoods = () => {
  console.log(addGoodsForm);
  visibleChange();
};

onMounted(() => {
  console.log(props);
});
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 45%;
}

.el-upload--picture-card {
  width: 50px;
  height: 50px;
}
</style>
